<template>
  <div class="user-dashboard">
    <topAndbottom>
      <template #title>角色管理</template>
      <template #container>
        <div class="common-container">
          <div class="container-search">
            <el-form :model="searchParams" label-width="80px" :inline="true" size="default" @submit.native.prevent="">
              <el-form-item label="角色">
                <el-input v-model="searchParams.name" clearable @keyup.enter.native="serachBtn" @clear="serachBtn"/>
              </el-form-item>
              <el-form-item>
                <el-button :icon="Search" @click="serachBtn" type="primary">搜索</el-button>
                <el-button :icon="Close" @click="resetBtn" type="danger">重置</el-button>
                <el-button :icon="Plus" type="success" @click="addBtn">新增</el-button>
                <el-button :icon="Plus" type="success">一键导入</el-button>
              </el-form-item>
            </el-form>
          </div>
          <div class="container-table">
            <el-table v-loading="roleTableDate.Loading" :height="roleTableDate.height" :data="roleTableDate.list" :row-class-name="tableRowClassName"
              style="width: 100%">
              <el-table-column show-overflow-tooltip min-width="200" prop="name" label="角色名称" align="center" />
              <el-table-column show-overflow-tooltip min-width="200" prop="description" label="角色描述" align="center" />
              <el-table-column show-overflow-tooltip min-width="200" prop="createTime" label="创建时间" align="center" />
              <el-table-column show-overflow-tooltip min-width="200" prop="state" label="部门状态" align="center" />
           
         
              <el-table-column label="操作" width="200" align="center">
                <template #default="scope">
                  <el-button type="primary" :icon="Edit" @click="editBtn(scope.row)">编辑</el-button>
                  <el-button type="danger" :icon="Delete" @click="deleteBtns(scope.row.id)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="container-footer">
            <el-pagination v-model:current-page="searchParams.page" v-model:page-size="searchParams.size"
              :page-sizes="[5,10,20,50]"
              layout="total, sizes, prev, pager, next, jumper" :total="roleTableDate.total" @size-change="handleSizeChange"
              @current-change="handleCurrentChange" />
          </div>
        </div>
      </template>

    </topAndbottom>
    <addEdit ref="RefRoleAddEdit" :roleTableDate="roleTableDate.DeptList" @save="save"></addEdit>
  </div>
</template>

<script setup lang='ts'>
import addEdit from './addEdit.vue'
import { Search, Plus, Edit, Close,Delete } from '@element-plus/icons'
import { reactive, toRefs, onBeforeMount, ref, onMounted } from 'vue'
import getWorkList from '@/composables/03organization/01user/useUserTable'
import roleTable from '@/composables/03organization/03role/roleTable'
import roleEdit from '@/composables/03organization/03role/roleEdit'
const { searchParams,getRoleList,roleTableDate,handleCurrentChange,handleSizeChange,resetBtn,serachBtn,tableRowClassName} =roleTable()
const {RefRoleAddEdit,addBtn,save,editBtn,deleteBtns} = roleEdit(searchParams,getRoleList,roleTableDate)

</script>
<style scoped lang='scss'>
.user-dashboard {
  height: 100%;

  :deep(.el-form-item__label) {
    color: #fff;
  }
  
}
</style>